import React, { Ref } from "react";
import { Card, Row, Col, message, Modal, Form, Table, Button, Input } from "antd";
import { FormComponentProps } from "antd/lib/form/Form"; //获取Form表单的interface
import { FormItemProps } from "antd/lib/form/FormItem";
import { PaginationConfig } from "antd/es/pagination/Pagination";
import { ColumnProps, TableRowSelection } from "antd/es/table/interface";
import { PaginationProps } from "antd/es/pagination/Pagination";
import AJAX, { AJAXResponseConfig, AJAXRequestConfig } from "../../ajax/ajaxServer";
import { formatSex, formatInterest } from "../../utils/tools";
import { getPaginationConfig } from "../../utils/utils";
import { ResponseResult, UserInfo } from "../../utils/interface";
import "./index.less";

interface IProps {
	info: User;
}

interface IStates {
	isOpenModal: boolean;
	info: User;
}

interface IFromProps {
	info: User;
}

interface IFromStates {
	info: User;
}

interface User {
	[propName: string]: any;
}

const FormItem = Form.Item;

const formItemLayout: FormItemProps = {
	labelCol: {
		xs: {
			span: 24,
		},
		sm: {
			span: 2,
		},
	},
	wrapperCol: {
		xs: {
			span: 24,
		},
		sm: {
			span: 4,
		},
	},
};

class NormalFormPage extends React.Component<IFromProps & FormComponentProps, IStates> {
	modalForm: any;

	constructor(props: IProps & FormComponentProps, state: IStates) {
		super(props, state);
		this.state = {
			isOpenModal: false,
			info: {
				aa: "",
				bb: "",
				cc: {
					cc1: "",
				},
			},
		};
	}

	componentDidMount() {
		// this.requestStandardDatas();
	}

	render() {
		const tableColumns: ColumnProps<User>[] = [
			{
				title: "Taa",
				dataIndex: "aa",
				key: "aa",
			},
			{
				title: "Tbb",
				dataIndex: "bb",
				key: "bb",
			},
			// {
			// 	title: "Tcc",
			// 	dataIndex: "cc.cc1",
			// 	key: "cc"
			// }
			// 上下两种配置效果相同
			{
				title: "Tcc",
				dataIndex: "cc",
				key: "cc",
				render: (text: any, record: User, index: number) => {
					return record.cc.cc1;
				},
			},
		];

		const tableColumns2: ColumnProps<User>[] = [
			{
				title: "Taa",
				dataIndex: "aa",
				key: "aa",
			},
			{
				title: "Tbb",
				dataIndex: "bb",
				key: "bb",
			},
			// {
			// 	title: "Tcc",
			// 	dataIndex: "cc.cc1",
			// 	key: "cc"
			// }
			// 上下两种配置效果相同
			{
				title: "Tcc",
				dataIndex: "cc",
				key: "cc",
				render: (text: any, record: User, index: number) => {
					return record.cc.cc1;
				},
			},
			{
				title: "Action",
				key: "operation",
				render: (record: User) => {
					return (
						<span
							onClick={() => {
								console.log(record);
							}}
						>
							<a>Edit</a>
						</span>
					);
				},
			},
		];

		const tableData: User[] = [
			{
				aa: "aa1",
				bb: "bb1",
				cc: {
					cc1: "cc1",
				},
			},
			{
				aa: "aa2",
				bb: "bb2",
				cc: {
					cc1: "cc2",
				},
			},
			{
				aa: "aa3",
				bb: "bb3",
				cc: {
					cc1: "cc3",
				},
			},
		];

		const rowSelection: TableRowSelection<User> = {
			type: "radio",
			onChange: (selectedRowKeys, selectedRows) => {
				let selected = selectedRows[0];
				this.setState({
					info: selected,
				});
			},
		};

		const paginationOption: PaginationProps = {
			current: 1,
			pageSize: 2,
			total: 10,
			onChange: (page: number, pageSize?: number) => {
				console.log(page, pageSize);
			},
		};

		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>表格表单</h1>
				</div>

				<Card title={`表格获取数据`}>
					<Row>
						<Col span={24}>
							<Form layout={"inline"}>
								<FormItem>
									<Button
										type={"primary"}
										onClick={() => {
											this.setState({
												isOpenModal: true,
											});
										}}
									>
										获取table数据
									</Button>
								</FormItem>
							</Form>
						</Col>
						<Col span={24}>
							<Table columns={tableColumns} dataSource={tableData} rowSelection={rowSelection} pagination={false}></Table>
						</Col>
					</Row>
				</Card>

				<Card title={`表格内数据操作`}>
					<Row>
						<Col span={24}>
							<Table columns={tableColumns2} dataSource={tableData} pagination={false}></Table>
						</Col>
					</Row>
				</Card>

				<Card title={`表单分页`}>
					<Row>
						<Col span={24}>
							<Table columns={tableColumns2} dataSource={tableData} pagination={paginationOption}></Table>
						</Col>
					</Row>
				</Card>

				<Modal
					title={`ModalForm`}
					visible={this.state.isOpenModal}
					width={600}
					onCancel={() => {
						this.setState({
							isOpenModal: !this.state.isOpenModal,
						});
					}}
				>
					{/* <ModalForm wrappedComponentRef={(form: any) => (this.modalForm = form)}></ModalForm> */}

					<Form>
						<FormItem label="Taa" {...formItemLayout}>
							{this.state.info.aa}
						</FormItem>
						<FormItem label="Tbb" {...formItemLayout}>
							{this.state.info.bb}
						</FormItem>
						<FormItem label="Tcc" {...formItemLayout}>
							{this.state.info.cc.cc1}
						</FormItem>
					</Form>
				</Modal>
			</div>
		);
	}
}

export default NormalFormPage;
